<!-- 下拉刷新上拉加载 -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
<link rel="stylesheet" href="/assets/home/css/details.css">

<body>
    <!-- 评论内容 -->
    <div id="mescroll" class="mescroll">
        <ul id="list" class="mui-table-view"></ul>
    </div>
</body>


<script>

    // 创建下拉刷新下拉加载实例
    var mescroll = new MeScroll('mescroll', {
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: DownCallback //下拉刷新的回调
        },
        up: {
            page: {
                num: 0, //默认从第0页开始起步
                size: 5, //每页显示多少条
                time: null, //时间
            },
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            htmlNodata: `<div class="more">没有更多了..</div>`, //没有更多数据的结构配置
            toTop: { //配置回到顶部按钮
                duration: 600,
                src: "/assets/home/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset: 100
            }
        }
    })

    // 下拉触发的回调函数
    function DownCallback() {
        //下拉刷新的回调; 默认重置上拉加载列表为第一页
        mescroll.resetUpScroll()
        // 清空
        $("#list").empty();
    }

    //上拉加载
    function UpCallback(current) {
        //当前页码值
        page = current.num
        limit = current.size

        //组装数据
        var data = {
            page,
            limit,
        }

        $.ajax({
            type: 'post',
            data: data,
            dataType: 'json',
            success: function (success) {
                if (success.code == 0) {
                    //提醒
                    mui.toast(success.msg, { duration: 1000 })

                    // 暂无更多数据
                    mescroll.endBySize(0, 0)
                    return false
                }

                // 当前页的数据个数
                var list = success.data.list
                // 总数据量
                var count = success.data.count

                //设置上拉加载状态
                mescroll.endBySize(list.length, count)

                //渲染列表数据
                FetchList(list);
            },
            error: function (error) {
                console.log(error)
            }
        })
    }

    // 渲染页面数据
    function FetchList(list) {
        // 定义一个变量用来拼接数据
        var html = '';

        for (var item of list) {
            html += `
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left userimg" src="${item.business.avatar_text}">
                    <div class="mui-media-body">
                        ${item.business.nickname ? item.business.nickname : '匿名'}
                        <p class='mui-ellipsis'>${item.content}</p>
                    </div>
                </a>
            </li>
            `
        }

        // 将循环的内容追加到ul中
        $('#list').append(html);
    }

</script>